import React, {Component} from 'react';
import { StyleSheet ,Text, View, ActivityIndicator,ScrollView } from 'react-native';
import { ListItem,FlatList,Button,Image } from 'react-native-elements'
import Ionicons from 'react-native-vector-icons/Ionicons';
import Api from './Api';

export default class NovelCategory extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('title', '分类'),
            headerRight: (
                <Button
                onPress = {() => navigation.navigate('Search')}
                icon={
                    <Ionicons
                    name="ios-search"
                    size={25}
                    color="#2089dc"
                />
                }
                type='clear'
                />
                ),
        }
    };
  
    state = { data:[],loaded:false,showPages:false,url:'' }
    
    initCat = () => {
        const { navigation } = this.props;
        const url = navigation.getParam('url', '');
        this.setState({url:url})
        Api.categoryNovel({url:url})
            .then((res) => {
                this.setState({
                    data:res,
                    loaded:true
                })
            })
    }

    changePage(url){
        if(url){
            this.setState({url:url,showPages:false,loaded:false})
            Api.categoryNovel({url:url})
                .then((res) => {
                    this.setState({
                        data:res,
                        loaded:true
                    })
                })
        }
    }

    showPagesLists = () => {
        this.setState(previousState => {
            return { showPages: !previousState.showPages };
          })
    }

    componentDidMount(){
        this.initCat()
    }

    render() {
        let {loaded,data,showPages} = this.state
        return (
          <View style={{ flex: 1,padding:10,}}>
            {loaded ?
                <View style={{flex:1}}>
                    <View style={{flex:1}}>
                        {showPages?
                                ''
                                :
                                <ScrollView>
                                  {
                            data.lists.map((l,i)=>(
                                <ListItem key={`${i}`}
                                    containerStyle={{
                                        backgroundColor:i%2===0?'#FFF':'#F7F7F7'
                                    }}
                                    title={l.title}
                                    onPress={() => this.props.navigation.navigate('Detail',{
                                        url:l.href,
                                        title:l.title
                                    })}
                                    subtitle={
                                        <View>
                                        <Text>{l.author}</Text>
                                        <Text>{l.review.substr(0,70)}</Text>
                                        </View>
                                    }
                                    leftAvatar={<Image source={{uri:l.cover}} style={{width:90,height:122,}}/> }
                                    />
                                    ))
                                }
                                </ScrollView>
                        }
                    </View>
                    <View style={{height:50,borderTopWidth:1,borderTopColor:'silver',}}>
                        <View style={{ flex: 1, justifyContent: "space-between", alignItems: "center", flexDirection: 'row' }}>
                            <Button icon={
    <Ionicons
      name="ios-arrow-back"
      size={15}
      color="#2089dc"
    />
  } style={{width: 80, height: 50,}} titleStyle={{color:'#2089dc'}} type="clear" onPress={() => this.changePage(data.prev)} title='上一页'/>
                            <Button iconRight={true} icon={
    <Ionicons
      name="ios-arrow-forward"
      size={15}
      color="#2089dc"
    />
  } style={{width: 80, height: 50,}} titleStyle={{color:'#2089dc'}} type="clear" onPress={() => this.changePage(data.next)} title='下一页'/>
                        </View> 
                    </View>
                </View>
                :
                <View style={styles.horizontal}>
                    <ActivityIndicator size="small" color="#00ff00" />
                    <Text>Loading...</Text>
                </View>
            }
          </View>
        );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      paddingLeft:5,
      paddingRight:5,
    },
    horizontal: {
      flex: 1,
      justifyContent: 'center',
      alignItems: "center",
      flexDirection: 'column',
      padding: 10
    },
    rightContainer: {
      flex: 1,
      alignItems:"flex-start",
      paddingLeft: 10,
    },
    title: {
      fontSize: 18,
      marginBottom: 8
    },
    year: {
      textAlign: "center"
    },
    thumbnail: {
      width: 53,
      height: 81
    },
    list: {
      paddingTop: 20
    }
  });
